<template>
  <Modal v-model:visible="visibleRef" class="modal-person-body"
   :footer="null" :centered="true"
   title="微信扫码 登录个人服务平台" width="712px">
    <div class="a-info flex-s">
    <div class="a-info-code">
      <img src="/public/resource/image/xcx-code.jpg" alt="">
      <p>微信扫码登录</p>
    </div>
    <div class="a-info-tent">
      <p class="green">“新疆工程建设云个人服务平台”小程序已正式上线， 随时随地，手机通办</p>
      <p class="item"><i>1</i>打开微信“扫一扫”，扫描左侧二维码登录“新疆工程建设云个人服务平台”</p>
      <p class="item"><i>2</i>完成实名制认证后，即可在小程序中进行个人端的各项业务办理 <a class="blue" target="_blank" href="/realName">实名认证方式 <DoubleRightOutlined/></a></p>
      <p class="item"><i>3</i>个人考试报名，请按照【网站首页】-【主题服务】-【教育培训考试业务】，点击个人报名登陆入口进入报名，或者<a class="blue" target="_blank" href="/themeService/detail/cms_exam">直接点击此</a>进入教育培训考试业务</p>
      <p class="item">技术咨询电话：400-032-9066</p>
    </div>
  </div>
  </Modal>
</template>

<script lang="ts" >
import { defineComponent, toRefs, PropType, ref, watch, watchEffect } from "vue";
import { Modal  } from "ant-design-vue";
import { DoubleRightOutlined} from '@ant-design/icons-vue';
export default defineComponent({
  components: {
    Modal,DoubleRightOutlined
  },
  props: {
    visible: {
      type: Boolean as PropType<boolean>,
      default: false
    },
  },
  setup(props, { emit }) {
    const { visible } = toRefs(props);

    const visibleRef = ref(false);

    watch(visible, (cur)=> {
      visibleRef.value = cur;
    })

    watchEffect(() => { emit('update:visible', visibleRef.value) })

    return {
      visibleRef
    };
  },
});
</script>

<style lang="less">
.modal-person-body {
  .ant-modal-header {
    background: @blue;

    .ant-modal-title {
      color: @white;
    }
  }

  .ant-modal-close {
    color: @white;
  }
}

</style>

<style lang="less" scoped>
.modal-person-body {
  .a-info{
    position: relative;
    padding: 20px 14px 40px;
    background: #fff;

    .a-info-code{
      width: 187px;

      img {
        width: 100%;
        height: 187px;
        margin-bottom: 10px;
      }

      p{
        margin-bottom: 0;
        font-size: 16px;
        font-weight: 400;
        color: #999;
        text-align: center;
      }
    }

    .a-info-tent{
      width: calc(100% - 220px);

      .green{
        font-size: 18px;
        color: #35C16C;
      }

      .item{
        position: relative;
        padding-left: 30px;
        margin-bottom: 10px;
        font-size: 16px;

        &:last-child{
          margin-bottom: 0;
        }

        i{
          position: absolute;
          top: 3px;
          left: 0;
          display: inline-block;
          width: 20px;
          height: 20px;
          line-height: 19px;
          color: white;
          text-align: center;
          background: #35C16C;
          border-radius: 50%;
        }
      }
    }
  }
}


</style>

